<template>
	<view>
		<!-- 配送 -->
		<view class="address-box">
			<view class="person" @click="getAddres()">
				<view v-if="!address_info.address"><button type="warn" size="mini">点击选择地址</button></view>
				<view class="detail" v-if="address_info">{{
          address_info.address
        }}</view>
				<view v-if="address_info.name"><text class="name">{{ address_info.name }}{{ address_info.sex }}</text>
					<text>{{ address_info.phone }}</text>
				</view>
			</view>
			<view>
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>

		<view class="goods-box">
			<view class="box-title">商品列表</view>
			<view class="goods" v-for="(item, index) in bags" :key="index">
				<view class="head-img">
					<image mode="widthFix" :src="item.head"></image>
				</view>
				<view class="content">
					<view>
						{{ item.product_title }}
					</view>
					<view class="norm">
						{{ item.product_norm_title }}
					</view>
				</view>
				<view class="price-box">
					<view class="price">¥{{ item.price }}</view>
					<view class="num">*{{ item.num }}</view>
				</view>
			</view>

			<view class="server">
				<view class="item border-bottom">
					<view>优惠</view>
					<view>暂无优惠</view>
				</view>
				<view class="item">
					<view>订单金额</view>
					<view style="color:#000"><i class="fa fa-rmb" /></i>{{order_price}}</view>
				</view>
			</view>

		</view>

		<view class="footer">
			<view class="btn-box">
				<view class="price">
					实付<text style="margin-left: 20upx; font-size: 40upx; color: red">¥{{ order_price }}</text></view>

				<button class="btn" @click="recharge" v-if=" token != null">
					立即付款
				</button>

				<button @click="onLogin" v-else class="btn">
					点击登录
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bags: [],
				order_price: 0,
				loginUserInfo: null,
				address_info: null,
				token: null
			}
		},
		onLoad() {
			this.bags = this.$store.state.bags
			if (this.bags) {
				this.bags.forEach((element) => {
					this.order_price += element.num * element.price
				})
			}
			this.token = uni.getStorageSync('token')
			if (this.$store.state.addressInfo) {
				this.address_info = this.$store.state.addressInfo
			} else {
				this.getDefaultAddress()
			}
		},
		methods: {
			getDefaultAddress() {
				this.$myRequest('address/list', {}).then((res) => {
					if (res.code == 1000) {
						res.data.forEach(element => {
							if (element.is_default == 1) {
								this.address_info = element
								this.$store.commit('setAddressInfo', element);
							}
						});
					}
				})
			},
			onLogin() {
				let that = this
				uni.login({
					provider: 'weixin',
					success: function(res) {
						//loginRes中有code，拿着code再请求自己服务器以获取openid
						that.$myRequest('login', {
							code: res.code
						}, "POST").then((res) => {
							if (res.code == 200) {
								uni.setStorageSync("accessToken", res.data.accessToken)
								that.$store.commit('setUserInfo', res.data);
								that.userInfo = res.data
							} else {
								uni.removeStorageSync("accessToken")
								that.$store.commit('setUserInfo', null);
							}
						})
					}
				});
			},
			getAddres() {
				this.$Router.push({
					path: '/pages/address/address'
				})
			},

			recharge: function() {
				if (!this.address_info) {
					uni.showToast({
						title: '请选择收货地址！',
						icon: 'none',
						duration: 2000,
					})
					return false
				}
				console.log(this.address_info)
				let data = {
					order_price: this.order_price, //订单价格
					actual_price: this.order_price, //实际支付价格
					goods_list: this.bags,
					address_id: this.address_info.id,
				}
				this.$myRequest('order/add', data, 'POST').then((response) => {
					if (response.code == 1000) {
						uni.requestPayment({
							provider: 'wxpay',
							nonceStr: response.data.nonceStr,
							package: response.data.package,
							paySign: response.data.paySign,
							signType: response.data.signType,
							timeStamp: response.data.timeStamp,
							success: (res) => {
								uni.showToast({
									title: '支付成功！',
									duration: 2000,
								})

								this.$Router.push({
									path: '/pages/order/order'
								})
							},
							fail: (err) => {
								uni.showToast({
									title: '已取消支付！',
									icon: 'none',
									duration: 2000,
								})

								this.$Router.push({
									path: '/pages/order/order'
								})
							},
						})
					} else {
						uni.showToast({
							title: response.msg,
							icon: 'none',
							duration: 2000,
						})
					}

				})
			},
		},
	}
</script>

<style lang="scss">
	page {
		background-color: #f5f5f5;
	}

	.zq {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 20upx;
		border-radius: 10upx;

		.item {
			flex: 1;
			padding: 40upx 0;
			font-size: 40upx;
			font-weight: 700;
			background: #fff;
			text-align: center;
			border-radius: 10upx;
		}

		.active {
			border: 1px solid $uni-color-team;
		}
	}

	.address-box {
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 40upx;
		margin: 20upx;
		margin-top: 40upx;
		border-radius: 10upx;

		.person {
			flex: 1;
			color: #555;
			font-size: 28upx;

			.detail {
				color: #000;
				font-size: 32upx;
				font-weight: 700;
				margin-bottom: 10upx;
			}

			.name {
				margin-right: 20upx;
			}
		}
	}

	.goods-box {
		padding: 40upx;
		margin: 20upx 20upx;
		margin-bottom: 100upx;
		border-radius: 10upx;
		line-height: 40upx;
		background-color: #fff;

		.box-title {
			font-size: 36upx;
			font-weight: 600;
			margin-bottom: 40upx;
		}

		.goods {
			display: flex;
			justify-content: space-between;
			margin-bottom: 40upx;

			.head-img {
				width: 160upx;
				height: 160upx;

				image {
					width: 140upx;
				}
			}

			.content {
				flex: 1;
				padding-left: 10upx;

				.norm {
					font-size: 24upx;
					margin-top: 10upx;
					color: #555;
				}
			}

			.price-box {
				.price {
					color: #333;
					font-weight: 600;
					font-size: 28upx;
				}

				.num {
					text-align: right;
					color: #999;
					font-size: 24upx;
				}
			}
		}

		.server {
			color: #888;

			.item {
				display: flex;
				justify-content: space-between;
				padding-top: 30upx;
				padding-bottom: 30upx;
			}

			.border-bottom {
				border-bottom: 1px solid #f5f5f5;
			}
		}
	}

	.footer {
		background-color: #fff;
		padding-left: 30upx;
		padding-right: 30upx;
		position: relative;
		box-sizing: border-box;
		position: fixed;
		width: 100%;
		bottom: 0;

		.btn-box {
			border-top: 1px solid rgb(237, 235, 235);
			height: 130upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;

			.price {
				font-size: 34upx;
				flex: 1;
			}

			.btn {
				margin-left: 20upx;
				font-size: 26upx;
				background-color: $uni-color-green;
				color: #FFF;
				border: none;
			}
		}
	}

	.u-slot-coupon-value {
		color: red;
	}
</style>